<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>米事见 - 热点舆情监测平台</title>
    <meta content="Responsive admin theme build on top of Bootstrap 4" name="description">
    <link href="static/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <!-- C3 charts css -->
    <link href="static/css/c3.min.css" rel="stylesheet" type="text/css">
    <!-- Table css -->
    <link href="static/css/rwd-table.min.css" rel="stylesheet" type="text/css" media="screen">
    <link href="static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="static/css/metismenu.min.css" rel="stylesheet" type="text/css">
    <link href="static/css/icons.css" rel="stylesheet" type="text/css">
    <link href="static/css/style.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="static/js/vue.global.js"></script>
    <script src="static/js/axios.min.js"></script>

</head>


<body>

    <div class="header-bg">
        <!-- Navigation Bar-->
        <header id="topnav">
            <div class="topbar-main">
                <div class="container-fluid">

                    <!-- Logo-->
                    <div>
                        <a href="#" class="logo">
                            <img src="static/picture/logo-mi.png" class="logo-lg" alt="" height="60">
                        </a>
                    </div>
                    <!-- End Logo-->

                    <div class="menu-extras topbar-custom navbar p-0">

                        <!-- Search input -->
                        <div class="search-wrap" id="search-wrap">
                            <div class="search-bar">
                                <input class="search-input" type="search" placeholder="Search">
                                <a href="#" class="close-search toggle-search" data-target="#search-wrap">
                                    <i class="mdi mdi-close-circle"></i>
                                </a>
                            </div>
                        </div>

                        <ul class="navbar-right ml-auto list-inline float-right mb-0">

                            <!-- full screen -->
                            <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                                <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                    <i class="fas fa-expand noti-icon"></i>
                                </a>
                            </li>

                          

                            <li class="dropdown notification-list list-inline-item">
                                <div class="dropdown notification-list nav-pro-img">
                                    <a class="dropdown-toggle nav-link arrow-none waves-effect nav-user" href="http://localhost:3000" role="button" aria-haspopup="false" aria-expanded="false">
                                        <img src="static\picture\ai.png" alt="user" class="rounded-circle">
                                    </a>
                                    
                                </div>
                            </li>

                            <li class="menu-item dropdown notification-list list-inline-item">
                                <!-- Mobile menu toggle-->
                                <a class="navbar-toggle nav-link">
                                    <div class="lines">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </div>
                                </a>
                                <!-- End mobile menu toggle-->
                            </li>

                        </ul>

                    </div>
                    <!-- end menu-extras -->

                    <div class="clearfix"></div>

                </div>
                <!-- end container -->
            </div>
            <!-- end topbar-main -->

            <!-- start content -->
            <div class="bg-dark">
                <div class="container-fluid">
                    <div class="row align-items-center ">
                        <div class="col-md-8">
                            <div class="page-title-box">
                                <h4 class="page-title">帖子</h4>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">
                                        <a href="javascript:void(0);">首页</a>
                                    </li>
                                    <li class="breadcrumb-item">
                                        <a href="javascript:void(0);">内容分析</a>
                                    </li>
                                    <li class="breadcrumb-item active">帖子</li>
                                </ol>
                            </div>
                        </div>

                        <div class="col-md-4 d-flex flex-row">
                            <div class="col-md-6 align-self-center" style="color:aliceblue">
                                <h6>查询每日详情:</h6>
                            </div>
                            <div class="float-right d-none d-md-block app-datepicker ml-auto">
                                <input type="text" class="form-control" data-date-format="MM dd, yyyy" readonly="readonly" id="datepicker">
                                <i class="mdi mdi-chevron-down mdi-drop"></i>
                            </div>
                        </div>
                    </div>

                    <div class="row top-content">
                        <div class="col-sm-6 col-xl-3">
                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">话题总数</h5>
                                    <h4 class="text-info pt-1 mb-0"><div id="count_contents"></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart1"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xl-3">
                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">评论总数</h5>
                                    <h4 class="text-warning pt-1 mb-0"><div id="count_comment"></div></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart2"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xl-3">
                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">转发总数</h5>
                                    <h4 class="text-primary pt-1 mb-0"><div id="count_repost"></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart3"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xl-3">

                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">点赞总数</h5>
                                    <h4 class="text-danger pt-1 mb-0"><div id="count_like"></h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart4"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end content -->

            <!-- MENU Start -->
            <div class="navbar-custom">
                <div class="container-fluid">

                    <div id="navigation">

                        <!-- Navigation Menu-->
                        <ul class="navigation-menu">

                            <li class="has-submenu">
                                <a href="index.html"><i class="dripicons-meter"></i> 首页</a>
                            </li>

                            <li class="has-submenu">
                                <a href="contents.html"><i class="dripicons-briefcase"></i> 内容分析</a>
                                <ul class="submenu">
                                            <li><a href="contents.html">帖子</a></li>
                                            <li><a href="topicresearch.html">话题</a></li>
                                </ul>
                            </li>

                            <li class="has-submenu">
                                <a href="blogger.html"><i class="dripicons-broadcast"></i> 权威博主</a>
                                <!-- <ul class="submenu">
                                            <li><a href="blogger.html">权威博主</a></li>
                                            <li><a href="sentiment-graph.html">舆情拓扑</a></li>
                                </ul> -->
                            </li>

                            <li class="has-submenu">
                                <a href="user.html"><i class="dripicons-view-thumb"></i> 用户分析</a>
                                <!-- <ul class="submenu">
                                            <li><a href="user.html">用户分析</a></li>
                                            <li><a href="#">暂无</a></li>
                                            <li><a href="#">暂无</a></li>
                                </ul> -->
                            </li>
                        </ul>
                        <!-- End navigation menu -->
                    </div>
                    <!-- end #navigation -->
                </div>
                <!-- end container -->
            </div>
            <!-- end navbar-custom -->
        </header>
        <!-- End Navigation Bar-->

    </div>
    <!-- header-bg -->
    <div class="wrapper">
        <div class="container-fluid">
<!--页面主体-->

            
            <!--高频词饼图及今日热词-->
            <div class="row">
                <div class="col-xl-6">
                    <div class="card">
                        <div class="card-body">

                            <h4 class="mt-0 header-title">高频词</h4>
                            <p class="sub-title">对所有帖子内容进行的高频词占比分析</p>

                            <div id="wordchart" style="width: 600px; height: 400px;"></div>

                        </div>
                    </div>
                </div>
                <!-- end col -->

                <div class="col-xl-6">
                <div id="app2">
                    <div class="card">
                        <div class="card-body" style="height: 480px;">

                            <h4 class="mt-0 header-title">每日热词</h4>
                            <p class="sub-title">前一日在微博用户发出的帖子中的热词</p> 
                            <div style="display: flex; justify-content: center;">
                            <table id="mainTable" class="table table-striped mb-0 table-editable" style="line-height: 0.7;width: 500px;">
                                <thead>
                                    <tr >
                                        <th ><button type="button" class="btn btn-dark">词语</button></th>
                                        <th><button type="button" class="btn btn-dark">出现次数</button></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item, index) in newData" :key="item.word_id" style="line-height: 1.3;">
                                        <th style="width: 150px;">
                                            {{item.word}}
                                        </th>
                                        <th style="width: 150px;">{{[523, 498, 478, 445, 347, 298, 136][index]}}</th>
                                    </tr>
                                </tbody>
                            </table>
                            </div>

                        </div>
                    </div>
                </div>
                </div> 
                <!-- end col -->
            </div>
            <!--贴子数曲线图-->
            <div class="row" style="display: flex; justify-content: center; align-items: center">     
                            <div class="col-12">            
                                <div class="card" >
                                    <div class="card-body" >
            
                                        <h4 class="mt-0 header-title">帖子总数</h4>
                                        <p class="sub-title">发帖量与时间的关系</p>
                                        <div id="chart_tiezi" style=" height: 400px;"  ></div>
                                    </div> 
                                </div>
                            </div> 
            </div>
            <!--主题词演化表格-->
            <div id="app1">
                            <div class="row">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <h4 class="mt-0 header-title">主题词演化</h4>
                                            <p class="sub-title">讲近21天的帖子内容分为了三个阶段，分别进行主题分类</p>
                                            <div >
                                                <table class="table mb-0">
                                                    <thead>
                                                        <tr>
                                                            <th></th>
                                                            <th>主题1</th>
                                                            <th>主题2</th>
                                                            <th>主题3</th>
                                                            <th>主题4</th>
                                                            <th>主题5</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody >
                                                        <tr>
                                                            <td>最近7天</td>
                                                           <td v-for="item in classData.slice(0,5)" :key="item.class_id">
                                                                
                                                                <button type="button" class="btn btn-primary">{{item.classify_word}} </button>
                                                            </td>
                                                        </tr> 
                                                        <tr>
                                                            <td>最近7-14天内</td>
                                                           <td v-for="item in classData.slice(5,10)" :key="item.class_id">
                                                             
                                                                <button type="button" class="btn btn-success">   {{item.classify_word}}</button> 
                                                            </td>
                                                        </tr> 
                                                        <tr>
                                                            <td>最近14-21天内</td>
                                                           <td v-for="item in classData.slice(10,15)" :key="item.class_id">
                                                            <button type="button" class="btn btn-info">{{item.classify_word}}</button>
                                                            </td>
                                                        </tr> 
                                                    
                                                       
                                                    </tbody>
                                                </table>
                                            </div>
                                           
                
                                        </div>
                                    </div>
                                </div>
                
                
                            </div>
            </div>
            <!--文本共现网络-->
            <div class="row">
                <div class="col-xl-12">
                    <div class="card"  >
                        <div class="card-body">
                            <h4 class="mt-0 header-title">文本共现网络</h4>
                            <p class="sub-title">对最近一个月帖子内容进行处理后，共线关系最强的前100个词语构成的文本共线网络</p>
                        </div>
                        <div id="graph" style="display: flex; justify-content: center; align-items: center"></div>
                    </div>
                </div> 
            </div>

           

        </div>
        <!-- end container-fluid -->
    </div>
    <!-- end wrapper -->

    <!-- Footer -->
    <!-- <footer class="footer">
        Copyright &copy; 2022.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
    </footer> -->

    <!-- End Footer -->
    



</body>
</html>
    <!-- jQuery  -->
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.bundle.min.js"></script>
    <script src="static/js/jquery.slimscroll.js"></script>
    <script src="static/js/waves.min.js"></script>

    <script src="static/js/apexcharts.min.js"></script>
    <script src="static/js/bootstrap-datepicker.min.js"></script>
 
     <!-- Responsive-table-->
     <script src="static/js/rwd-table.min.js"></script>
    <!--C3 Chart三个图的样式设置-->
    <!-- <script src="static/js/d3.min.js"></script>
    <script src="static/js/c3.min.js"></script>
    <script src="static/js/c3-chart-init.js"></script> -->
    <!-- App js -->
    <script src="static/js/app.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    
<script>
    document.addEventListener("DOMContentLoaded", function() {
    // 找到日期选择器的元素
    const datepickerInput = document.getElementById('datepicker');

    // 设置日期为5月8日
    datepickerInput.value = 'May 08, 2024'; // 根据你的日期格式进行设置

    // 初始化日期选择器
    $(datepickerInput).datepicker({
        autoclose: true,
        todayHighlight: true,
        format: 'MM dd, yyyy' // 日期格式要与显示格式一致
    });

    // 加载5月8日对应的数据
    loadData('2024-05-08');

    // 监听日期选择变化事件
    $(datepickerInput).on('changeDate', function(e) {
        const selectedDate = e.format('yyyy-mm-dd'); // 获取选择的日期
        loadData(selectedDate); // 加载新日期对应的数据
    });
});
    // const countDate = '2024-05-08'
    document.addEventListener("DOMContentLoaded", function() {
const datepickerInput = document.getElementById('datepicker');

// 初始化日期选择器
$(datepickerInput).datepicker({
    autoclose: true,
    todayHighlight: true,
    format: 'yyyy-mm-dd' // 日期格式要与后端API期望的格式一致
});

// 获取默认日期
// const defaultDate = getDefaultDate();
const defaultDate = '2024-05-08';

// 加载默认日期对应的数据
loadData(defaultDate);

// 监听日期选择变化事件
$(datepickerInput).on('changeDate', function(e) {
    const selectedDate = e.format('yyyy-mm-dd'); // 获取选择的日期
    loadData(selectedDate); // 加载新日期对应的数据
});

// 获取默认日期的函数
function getDefaultDate() {
    const today = new Date();
    const year = today.getFullYear();
    const month = (today.getMonth() + 1).toString().padStart(2, '0'); // 月份补零
    const day = today.getDate().toString().padStart(2, '0'); // 日补零
    return `${year}-${month}-${day}`;
}

// 加载数据的函数
function loadData(date) {
    const apiUrl = `http://localhost:8080/hot/countlist?Date=${date}`;

    // 发起GET请求获取数据
    axios.get(apiUrl)
        .then(response => {
            const countList = response.data[0];

            // 更新页面上对应的数据显示
            updateDataDisplay(countList);
        })
        .catch(error => {
            console.error('Error fetching data:', error);
            // 处理请求错误
            const emptyData = {
                count_comment: 0,
                count_repost: 0,
                count_like: 0,
                count_contents: 0
            };
            updateDataDisplay(emptyData);
        });
}

// 更新数据显示的函数
function updateDataDisplay(data) {
    const commentElement = document.getElementById('count_comment');
    const repostElement = document.getElementById('count_repost');
    const likeElement = document.getElementById('count_like');
    const contentsElement = document.getElementById('count_contents');

    commentElement.innerText = data.count_comment || 0;
    repostElement.innerText = data.count_repost || 0;
    likeElement.innerText = data.count_like || 0;
    contentsElement.innerText = data.count_contents || 0;
}
});

</script>


    <script>
        $(function() {
            $('.table-responsive').responsiveTable({
                addDisplayAllBtn: 'btn btn-secondary'
            });
        });
    </script>
    <script src="static/js/echarts.min.js"></script>
    <!--词语共现网络-->
    <script>

    </script>
    <!--帖子总数接口-->
    <script>
        axios.get('http://localhost:8080/contents/list4')
            .then(response => {
               const data=response.data;
               console.log(data)
               const dates=data.map(item => item.date);
               const nums=data.map(item =>item.num_contents);

                var dom = document.getElementById('chart_tiezi')
                console.log(dom)
                const chart = echarts.init(dom);

                // 设置图表选项
                const option = {
                    xAxis: {
                        type: 'category',
                        data: dates,
                        axisLabel: {
                        interval: 10, // 设置为0，显示所有刻度
                    }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: nums,
                        type: 'line'
                    }]
                };

                // 使用刚指定的配置项和数据显示图表
                chart.setOption(option);
            })
            .catch(error => {
                console.error('Error fetching data:', error);
            });
    </script>
    <!--词频饼状图-->
    <script>
        // 使用 Axios 获取数据
        axios.get('http://localhost:8080/freq/list1')
            .then(response => {
                const chartData = response.data;
                console.log(chartData)
                // 初始化其他类别的计数
                let otherCount = 0;

                // 处理数据：将 frequency < 100 的 word 合并为 "其他"
                const processedData = chartData.reduce((acc, item) => {
                    if (item.frequency >= 25) {
                        acc.push({ name: item.word, value: item.frequency });
                    } else {
                        otherCount += item.frequency;
                    }
                    return acc;
                }, []);

                // 添加合并后的 "其他" 类别
                if (otherCount > 0) {
                    processedData.push({ name: '其他', value: otherCount });
                }

                // 渲染饼图
                const chartDom = document.getElementById('wordchart');
                const chart = echarts.init(chartDom);

                chart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)',
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 10,
                        top: 20,
                        bottom: 20,
                        data: processedData.map(item => item.name),
                        formatter: function (name) {
                            // 可根据具体需求调整省略长度
                            const maxLength = 10; // 设置最大显示长度为10个字符
                            if (name.length > maxLength) {
                                return name.slice(0, maxLength) + '...'; // 超过长度的部分用省略号代替
                            }
                            return name;
                        },
                    },
                    series: [
                    {
                    name: '词语',
                    type: 'pie',
                    radius: '65%',
                    center: ['40%', '50%'],
                    data: processedData,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
  ],
                });
            })
            .catch(error => {
                console.error('Error fetching data:', error);
            });
    </script>
    <!--今日热词-->
    <script setup>
        
        const mydata2 = {
        el: '#app2',
        data() {
         return {
         newData: [],
    };
  },
  mounted() {
    this.getNewData();
  },
  methods: {
    getNewData(){
        axios.get("http://localhost:8080/freq/list2").then((res) => {
                    this.newData = res.data;
                    console.log(res.data);
                }).catch((err) => {
                    console.log(err)
                })
    }
},
        }
    Vue.createApp(mydata2).mount("#app2")
    </script>
    <!--主题词演化接口-->
    <script setup>
        
        const mydata1 = {
        el: '#app1',
        data() {
         return {
        classData: [],
    };
  },
  mounted() {
    this.getClassData();
  },
  methods: {
    getClassData(){
        axios.get("http://localhost:8080/contents/list6").then((res) => {
                    this.classData = res.data;
                    console.log(res.data);
                }).catch((err) => {
                    console.log(err)
                })
    }
},
        }
    Vue.createApp(mydata1).mount("#app1")
    </script>
    <!--文本共现网络-->
    <script>
        function drawGraph() {
            // 使用axios从接口获取数据
            axios.get('http://localhost:8080/wordnet/list')
                .then(response => {
                    const data = response.data;
                    console.log(data);
    
                    // 修改后的数据处理逻辑
                    const nodes = data.map((item, index) => ({
                        id: index,
                        name: item.word,
                        cooccurrence: item.relations.split(',').map(Number)
                    }));
                    const links = [];
    
                    nodes.forEach((node, index) => {
                        const scaleFactor = 0.003; // 缩放因子，可以根据需要调整
                        const radius = 5 + node.cooccurrence.reduce((acc, val) => acc + val, 0);
                        node.radius = radius * scaleFactor; // 根据共现次数设置节点半径，并乘以缩放因子
                    });
    
                    data.forEach((item, index) => {
                        const cooccurrence = item.relations.split(',').map(Number);
                        cooccurrence.forEach((value, targetIndex) => {
                            if (value > 0 && index !== targetIndex) {
                                links.push({ source: index, target: targetIndex, value: value });
                            }
                        });
                    });
    
                    // 创建力导向图
                    const svg = d3.select("#graph")
                        .append("svg")
                        .attr("width", 1200)
                        .attr("height", 800);
    
                    const width = +svg.attr("width"),
                        height = +svg.attr("height");

                    const simulation = d3.forceSimulation(nodes)
                    .force("link", d3.forceLink(links).id(d => d.id).distance(80))
                    .force("charge", d3.forceManyBody().strength(-50))
                    .force("center", d3.forceCenter(width / 2, height / 2));
    
                    // 创建连线
                    const link = svg.append("g")
                        .attr("class", "links")
                        .selectAll("line")
                        .data(links)
                        .enter().append("line")
                        .attr("stroke-width", 1)
                        .attr("stroke", "#999999");
    
                    // 创建节点
                    const node = svg.append("g")
                        .attr("class", "nodes")
                        .selectAll("circle")
                        .data(nodes)
                        .enter().append("circle")
                        .attr("r", d => d.radius) // 根据共现次数设置节点大小
                        .attr("fill", "skyblue")
                        .call(drag(simulation));
    
                    // 创建节点标签
                    const label = svg.append("g")
                        .attr("class", "labels")
                        .selectAll("text")
                        .data(nodes)
                        .enter().append("text")
                        .text(d => d.name)
                        .attr("font-size", "12px");
            
                    // 鼠标悬停节点时，显示节点标签
                    node.on("mouseover", function (event, d) {
                        label.filter(l => l.id === d.id)
                            .style("display", "block");
                    }).on("mouseout", function (event, d) {
                        label.filter(l => l.id === d.id)
                            .style("display", "none");
                    });
            
                    // 创建拖拽行为
                    function drag(simulation) {
                        function dragstarted(event, d) {
                            if (!event.active) simulation.alphaTarget(0.2).restart();
                            d.fx = d.x;
                            d.fy = d.y;
                        }
            
                        function dragged(event, d) {
                            d.fx = event.x;
                            d.fy = event.y;
                        }
            
                        function dragended(event, d) {
                            if (!event.active) simulation.alphaTarget(0.2);
                            d.fx = null;
                            d.fy = null;
                        }
            
                        return d3.drag()
                            .on("start", dragstarted)
                            .on("drag", dragged)
                            .on("end", dragended);
                    }
            
                    // 更新节点和连线位置
                    simulation.on("tick", () => {
                        link
                            .attr("x1", d => d.source.x)
                            .attr("y1", d => d.source.y)
                            .attr("x2", d => d.target.x)
                            .attr("y2", d => d.target.y);
            
                        node
                            .attr("cx", d => d.x)
                            .attr("cy", d => d.y);
            
                        label
                            .attr("x", d => d.x + 10)
                            .attr("y", d => d.y - 10);
                    });
                })
                .catch(error => console.error('Error fetching data:', error));
        }
    
        drawGraph();
    </script>
    

<style>
    .tooltip {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        pointer-events: none;
        opacity: 0;
    }
</style>
  
    